<template>
	<view class="content">
		<view class="wid100" style="height: 452rpx;">
			<image :src="infos.cover" class="wh100" mode="aspectFill"></image>
		</view>
		<view class="wh100 bacFFF">
			<view class="wid90 mar">
				<view style="height: 40rpx;"></view>
				<view class="foSi40 fowe600">{{infos.store_name}}</view>
				<view class="dis disAl disJuB" style="margin-top: 50rpx;"
					@click="tiaozhuan('/pages/shop/certification?id='+id)">
					<view class="dis disAl">
						<image src="../../static/yingyezhizhao.png" style="width: 34rpx;height: 30rpx;"></image>
						<view class="mar-left10 foSi30 fowe600">营业执照：{{infos.store_name}}</view>
					</view>
					<uni-icons type="right" size="30rpx"></uni-icons>
				</view>
				<view class="dis disAl mar-top30">
					<image src="../../static/shijian.png" style="width: 34rpx;height: 34rpx;"></image>
					<view class="mar-left10 foSi30 fowe600">营业时间：{{infos.start_time}}-{{infos.end_time}}</view>
				</view>
				<view class="dis disAl disJuB mar-top30">
					<view class="dis disAl">
						<uni-icons type="location" size="34rpx"></uni-icons>
						<view class="mar-left10 foSi30 fowe600">{{infos.address}}</view>
					</view>
					<view class="dis disAl">
						<image src="../../static/dianhua.png" style="width: 38rpx;height: 38rpx;"
							@click="boda(infos.tel)"></image>
						<!-- #ifdef APP -->
						<image src="../../static/dingwei.png" @click="handleNavigation(infos)"
							style="width: 38rpx;height: 38rpx;margin-left: 16rpx;"></image>
						<!-- #endif -->
							
						<!-- #ifdef H5 -->
						<image src="../../static/dingwei.png" @click="handleOpen()"
							style="width: 38rpx;height: 38rpx;margin-left: 16rpx;"></image>
						<!-- #endif -->
							
					</view>
				</view>
			</view>
			<view style="height: 50rpx;"></view>
		</view>
		<view class="mar-top20 bacFFF ">
			<view class="wid90 mar">
				<view style="height: 10rpx;"></view>
				<view class="hei60 dis disAl disJuB mar-bott10">
					<view class="fowe600 foSi30">推荐项目</view>
					<view class="dis disAl foSi25" @click="tiaozhuan('/pages/shop/shopServe?id='+id)">
						<view class="mar-right10">查看更多</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view>
				</view>
				<block v-for="(item,index) in fw_lists" :key="index">
					<view class="dis mar-top20" @click.stop="tiaozhuan('/pages/serve/serve?id='+item.id)">
						<view style="width: 25%;height: 142rpx;">
							<image :src="item.cover_img" class="hei100 borRad10" style="width: 142rpx;"></image>
						</view>
						<view style="width: 75%;">
							<view class="dis disAl disJuB">
								<view class="foSi30 fowe600">{{item.name}}</view>
								<view class="foSi20" style="color: #878787;">{{item.all_sales}}人已预约</view>
							</view>
							<view class="foSi20 webkitLineClamp mar-top10" style="color: #878787;">{{item.subtitle}}
							</view>
							<view class="mar-top20 dis disAl disJuB">
								<view class="dis disAl">
									<view class="foSi15 coFFF tim1" :style="'background-color: '+theme.seco_color+';'">{{item.duration}}分钟</view>
									<view class="mar-left10">
										<view class="foSi20" style="vertical-align: bottom;color: #FF0000;">
											<span>¥</span>
											<span class="fowe600 foSi30">{{item.price}}</span>
											<span class="foSi15 mar-left10 poRel" style="color: #A6A6A6;">
												<span>¥</span>
												<span class="fowe600 foSi20">{{item.orig_price}}</span>
												<view class="wid100 poAbs"
													style="height: 1rpx;background-color: #A6A6A6;top: 40%;left: 0;">
												</view>
											</span>
										</view>
									</view>
								</view>
								<view class="dis disAl disJuC foSi22 coFFF butt2" :style="'background-color: '+theme.main_color+';'"
									@click.stop="tiaozhuan('/pages/serve/technicianSelective?id='+item.id)">选择技师</view>
							</view>
						</view>
					</view>
				</block>
				<wsj v-if="list.service_list.length == 0" zs='3'></wsj>
				<view style="height: 30rpx;"></view>
			</view>
		</view>
		<view class="mar-top20 bacFFF ">
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="hei60 dis disAl disJuB mar-bott10">
					<view class="fowe600 foSi30">技师展示</view>
					<view class="dis disAl foSi25" @click="tiaozhuan('/pages/shop/technicianShop?id='+id)">
						<view class="mar-right10">查看更多</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view>
				</view>
				<scroll-view class="mar-top20" style="white-space: nowrap;" scroll-x="true">
					<block v-for="(item,index) in infos.technician" :key="index">
						<view style="width: 20%;display: inline-block;">
							<view class="dis disJuC"
								@click="tiaozhuan('/pages/technician/particulars?id='+item.id)">
								<view>
									<view style="width: 100rpx;height: 100rpx;">
										<image :src="item.coverimg" :lazy-load="true" class="wh100 borRad50" mode="aspectFill"></image>
									</view>
									<view class="mar-top20 textCen foSi25">{{item.name}}</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
				<view style="height: 30rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import wsj from '../common/w_sj.vue'
	export default {
		components: {
			wsj
		},
		data() {
			return {
				url: this.global.url,
				id: '',
				infos: [],
				fw_lists: [],
				theme: null
			}
		},
		onLoad(option) {
			var that = this;
			that.id = option.id
			that.theme = uni.getStorageSync('theme')
			that.info();
			that.fw_list()
		},
		methods: {
			// 选择地图
			handleOpen() {
				let that = this
				uni.showActionSheet({
					itemList: ['高德地图', '百度地图', '腾讯地图'],
					success: function(res) {
						that.guide(res.tapIndex)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			guide(signMap) {
				uni.showLoading({
					title: '跳转中'
				});
				var position = {
					name: this.infos.address,
					longitude: this.infos.lng,
					latitude: this.infos.lat
				}
				if (position.name && position.name != '') {
					//地点位置position.name 地点经纬度lng lat
					var lng = position.longitude;
					var lat = position.latitude;
					if (signMap == 0) {
						// 高德地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								}
							}
						})
					} else if (signMap == 1) {
						// 百度地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									var delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								} else {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									let delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								}
							}
						})
					} else {
						// 腾讯地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用腾讯地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								}
							}
						})
					}
				} else {
					uni.showToast({
						title: '暂不知道该地点位置',
						icon: 'none',
						duration: 2000,
					});
				}
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},
			handleNavigation() {
				const _this = this
				// #ifdef APP-PLUS
				// 判断系统安装的地图应用有哪些, 并生成菜单按钮
				let _mapName = [{
						title: '高德地图',
						name: 'amap',
						androidName: 'com.autonavi.minimap',
						iosName: 'iosamap://'
					},
					{
						title: '百度地图',
						name: 'baidumap',
						androidName: 'com.baidu.BaiduMap',
						iosName: 'baidumap://'
					},
					{
						title: '腾讯地图',
						name: 'qqmap',
						androidName: 'com.tencent.map',
						iosName: 'qqmap://'
					},
				]
				// 根据真机有的地图软件 生成的 操作菜单
				let buttons = []
				let platform = uni.getSystemInfoSync().platform
				platform === 'android' && _mapName.forEach(item => {
					if (plus.runtime.isApplicationExist({
							pname: item.androidName
						})) {
						buttons.push(item)
					}
				})
				platform === 'ios' && _mapName.forEach(item => {
					console.log(item.iosName)
					if (plus.runtime.isApplicationExist({
							action: item.iosName
						})) {
						buttons.push(item)
					}
				})
				if (buttons.length) {
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: buttons
					}, function(e) {
						let _map = buttons[e.index - 1]
						_this.openURL(_map, platform)
					})
				} else {
					uni.showToast({
						title: '请安装地图软件',
						icon: 'none'
					})
					return
				}
				// #endif
			},

			// 打开第三方程序实际应用
			openURL(map, platform) {
				var lat = uni.getStorageSync('lat') ? uni.getStorageSync('lat') : 39.908692
				var lng = uni.getStorageSync('lon') ? uni.getStorageSync('lon') : 116.397477
				let _defaultUrl = {
					android: {
						"amap": `amapuri://route/plan/?sid=&did=&dlat=${this.infos.lat}&dlon=${this.infos.lng}&dname=${this.infos.address}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.infos.address}&tocoord=${this.infos.lat},${this.infos.lng}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${lat},${lng}&destination=name:${this.infos.address}|latlng:${this.infos.lat},${this.infos.lng}&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo"`
					},
					ios: {
						"amap": `iosamap://path?sourceApplication=fuxishan_uni_client&dlat=${this.infos.lat}&dlon=${this.infos.lng}&dname=${this.infos.address}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.infos.address}&tocoord=${this.infos.lat},${this.infos.lng}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${lat},${lng}&destination=name:${this.infos.address}|latlng:${this.infos.lat},${this.infos.lng}&mode=driving&src=ios.baidu.openAPIdemo`
					}
				}
				let newurl = encodeURI(_defaultUrl[platform][map.name]);
				console.log(newurl)
				plus.runtime.openURL(newurl, function(res) {
					console.log(res)
					uni.showModal({
						content: res.message
					})
				}, map.androidName ? map.androidName : '');
			},
			boda(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			info() {
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/store/infos',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						store_id: that.id
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.infos = result.data
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			fw_list() {
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/service/lists',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						sort: 0
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.fw_lists = result.data.data.slice(0, 3)
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}

	.tim1 {
		padding: 10rpx;
		border-radius: 5rpx;
	}

	.butt2 {
		width: 125rpx;
		height: 50rpx;
		border-radius: 10rpx;
	}
</style>